<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            width: 500px;
            height: 800px;
            background: #000;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .plane {
            width: 80px;
            height: 80px;
            background: url(img/plane.png) center/100% 100%;
            position: absolute;
            bottom: 10px;
            left: calc(50% - 40px);
            z-index: 99;
        }

        .bullet {
            width: 5px;
            height: 10px;
            border-radius: 50% 50% 0 0;
            background: gold;
            box-shadow: 0 2px 3px #fff;
            position: absolute;
            z-index: 99;
        }

        .enemy {
            width: 40px;
            height: 40px;
            background: url(img/plane.png) center/100% 100%;
            position: absolute;
            top: 0;
            transform: rotate(180deg);
            z-index: 99;
        }

        .cover {
            width: 500px;
            height: 800px;
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            z-index: 999;
        }

        .point {
            color: red;
            position: absolute;
            width: 80px;
            height: 80px;
            right: 0;
        }

        h1 {
            color: #fff;
            text-align: center;
            line-height: 120px;
            margin-top: 200px;
        }

        p {
            color: #fff;
            font-size: 12px;
            text-align: center
        }

        button {
            width: 100px;
            height: 30px;
            background: orangered;
            color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            cursor: pointer;
        }

        .boomlist {
            display: flex;
            position: absolute;
            left: 0;
            bottom: 0;
            opacity: 0.8;
        }

        .boomlist>li,
        .boom,
        .boom_birth {
            width: 20px;
            height: 37px;
            background: url(img/boom.png) center/100% 100%;
        }

        .boom,
        .boom_birth {
            position: absolute;
        }

        .boomEffect {
            width: 100px;
            height: 100px;
            background: url(img/bome.png) center/100% 100%;
            position: absolute;
            transform: scale(3);
            animation: move 2s forwards linear;
        }

        @keyframes move {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
                display: none;
            }
        }

        .strengBullet {
            width: 20px;
            height: 20px;
            background: url(img/daoju.png);
            position: absolute;
        }
    </style>
</head>

<body style="overflow: hidden;">
    <div class="container">
        <div class="plane"></div>
        <div class="point"></div>
        <ul class="boomlist">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="cover">
            <h1>飞机大战</h1>
            <p>点击“开始游戏”进行游戏，上/下/左/右键控制方向，<br>空格键射击，ctrl发射炸弹，回车键暂停/继续游戏</p>
            <button>开始游戏</button>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(() => {
            //重置所有时间
            var shootFlyTime = null;
            var enemyCreatTime = null;
            var enemyFlyTime = null;
            var enemyCollisionTime = null;
            var boomtFlyTime = null;
            var boomCreatTime = null;
            var StrengthenbulletTime = null;
            var propFlyTime = null;
            //初始化游戏开始
            var isPlaying = false;
            var gameStart = false;
            //初始化分数
            var point = 0;
            //初始化子弹
            var bulletTime = 800;
            var bulletAttackTime = 80;
            //初始化敌机
            var enemyFlyTimes = 400;
            var enemyAppearTime = 900;

            //展示分数页面
            $(".point").html(`得分：${point}`);
            //封面页
            $("button").click(() => {
                $(".cover").hide();
                gameStart = true;
                changeState();
            });
            //获取按键
            $(window).keydown(e => {
                var left = $(".plane").position().left;
                var top = $(".plane").position().top;
                if (!gameStart) return false;
                switch (e.keyCode) {
                    case 38:
                        top -= 10;
                        break;
                    case 40:
                        top += 10;
                        break;
                    case 37:
                        left -= 10;
                        break;
                    case 39:
                        left += 10;
                        break;
                    case 32:
                        shoot();
                        break;
                    case 13:
                        changeState();
                        break;
                    case 17:
                        clearScreen();
                        break;
                }
                if (!isPlaying) return false;
                if (left < 0) left = 0;
                else if (left > $(".container").innerWidth() - $(".plane").innerWidth()) left = $(".container").innerWidth() - $(".plane").innerWidth();
                else if (top < 0) top = 0;
                else if (top > $(".container").innerHeight() - $(".plane").innerHeight()) top = $(".container").innerHeight() - $(".plane").innerHeight();
                $(".plane").css({
                    left: left,
                    top: top
                });
            });
            //状态改变
            function changeState() {
                if (!isPlaying) {
                    shootFly();
                    enemyCreat();
                    enemyFly();
                    enemyCollision();
                    boomtFly();
                    boomCreat();
                    propFly();
                    strengthenBullet();
                } else {
                    clearInterval(shootFlyTime);
                    clearInterval(enemyCreatTime);
                    clearInterval(enemyCollisionTime);
                    clearInterval(enemyFlyTime);
                    clearInterval(boomtFlyTime);
                    clearInterval(boomCreatTime);
                    clearInterval(propFlyTime);
                    clearInterval(StrengthenbulletTime);
                };
                isPlaying = !isPlaying;
            };
            //定义子弹发射间隔时间
            var endTime = new Date();
            var shoot = () => {
                if (!isPlaying) return false;
                if (new Date() - endTime < bulletTime) return false;
                var bullet = $("<div/>").addClass("bullet");
                $(".container").append(bullet);
                var top = $(".plane").position().top - 15;
                var left = $(".plane").position().left + $(".plane").innerWidth() / 2 - bullet.innerWidth() / 2;
                bullet.css({
                    left: left,
                    top: top,
                });
                endTime = new Date();
            };
            //渲染子弹飞行
            function shootFly() {
                shootFlyTime = setInterval(() => {
                    $(".bullet").each(function () {
                        var top = $(this).position().top - 10;
                        $(this).css("top", top);
                        if (top < 0) $(this).remove();
                    });
                }, bulletAttackTime);
            };
            //敌人出现
            function enemyCreat() {
                enemyCreatTime = setInterval(() => {
                    var enemy = $("<div/>").addClass("enemy");
                    $(".container").append(enemy);
                    var left = Math.round(Math.random() * ($(".container").innerWidth() - enemy.innerWidth()));
                    enemy.css("left", left);
                }, enemyAppearTime);
            };
            //定义炸弹功能
            var boomendtime = new Date();
            var clearScreen = () => {
                if (new Date() - boomendtime < 800) return false;
                if (!isPlaying) return false;
                if ($(".boomlist li").length <= 0) return false;
                var boom = $("<div/>").addClass("boom");
                $(".container").append(boom);
                var top = $(".plane").position().top - 15;
                var left = $(".plane").position().left + $(".plane").innerWidth() / 2 - boom.innerWidth() / 2;
                boom.css({
                    left: left,
                    top: top,
                });
                $(".boomlist li:first-child").remove();
                boomendtime = new Date();
            };
            //渲染炸弹爆炸
            function boomtFly() {
                boomtFlyTime = setInterval(() => {
                    $(".boom").each(function () {
                        var top = $(this).position().top - 10;
                        var left = $(this).position().left;
                        $(this).css("top", top);
                        if ($(".plane").position().top - top > 200) {
                            $(this).remove();
                            var boomEffect = $("<div/>").addClass("boomEffect");
                            $(".container").append(boomEffect);
                            boomEffect.css({
                                left: left - boomEffect.innerWidth() / 2 + 12,
                                top: top - 100,
                            });
                            point += $(".enemy").length * 10;
                            $(".enemy").remove();
                            $(".bullet").remove();
                            $(".point").html(`得分：${point}`);
                        };
                    });
                }, 80);
            };

            function enemyFast() {
                if (point >= 300) {
                    enemyFlyTimes = 300;
                    enemyAppearTime = 800;
                };
                if (point >= 600) {
                    enemyFlyTimes = 250;
                    enemyAppearTime = 600;
                };
                if (point >= 1000) {
                    enemyFlyTimes = 160;
                    enemyAppearTime = 400;
                };
                if(point>=1500){
                    enemyFlyTimes = 80;
                    enemyAppearTime = 200;
                };
            }

            //渲染敌人飞行
            function enemyFly() {
                enemyFlyTime = setInterval(() => {
                    $(".enemy").each(function () {
                        var top = $(this).position().top + 10;
                        $(this).css("top", top);
                        if (top > $(".container").innerHeight()) $(this).remove();
                    });
                }, enemyFlyTimes);
            };
            //获取位置
            function getPosition(a) {
                return {
                    l: a.offsetLeft,
                    r: a.offsetLeft + a.offsetWidth,
                    t: a.offsetTop,
                    b: a.offsetTop + a.offsetHeight,
                };
            };
            //检查是否碰撞
            function checkCollision(a, b) {
                var a = getPosition(a);
                var b = getPosition(b);
                if (a.l >= b.l && a.l <= b.r && a.t >= b.t && a.t <= b.b) {
                    return true;
                } else if (a.r >= b.l && a.r <= b.l && a.t >= b.t && a.t <= b.b) {
                    return true;
                } else if (a.l >= b.l && a.l <= b.r && a.b >= b.t && a.b <= b.b) {
                    return true;
                } else if (a.r >= b.l && a.r <= b.l && a.b >= b.t && a.b <= b.b) {
                    return true;
                } else {
                    return false;
                };
            };
            //渲染碰撞效果
            function enemyCollision() {
                enemyCollisionTime = setInterval(() => {
                    $(".enemy").each(function (i, enemy) {
                        $(".bullet").each(function (i, bullet) {
                            if (checkCollision(bullet, enemy) || checkCollision(enemy, bullet)) {
                                bullet.remove();
                                enemy.remove();
                                point += 10;
                                $(".point").html(`得分：${point}`);
                                enemyFast();
                            };
                        });
                        if (checkCollision($(".plane").get(0), enemy) || checkCollision(enemy, $(".plane").get(0))) {
                            changeState();
                            alert(`GG!~您获得了${point}分`);
                            location.reload();
                        };
                    });
                    $(".boom_birth").each((i, boom_birth) => {
                        if (checkCollision($(".plane").get(0), boom_birth) || checkCollision(boom_birth, $(".plane").get(0))) {
                            boom_birth.remove();
                            $(".boomlist").append(`<li></li>`);
                        };
                    })
                    $(".strengBullet").each((i, strengBullet) => {
                        if (checkCollision($(".plane").get(0), strengBullet) || checkCollision(strengBullet, $(".plane").get(0))) {
                            strengBullet.remove();
                            bulletTime -= 50;
                            bulletAttackTime -= 10;
                            if (bulletTime <= 200) bulletTime === 200;
                            if (bulletAttackTime <= 10) bulletTime === 10;
                        };
                    });
                }, 10);
            };
            //炸弹补充
            function boomCreat() {
                boomCreatTime = setInterval(() => {
                    var boom_birth = $("<div/>").addClass("boom_birth");
                    $(".container").append(boom_birth);
                    var left = Math.round(Math.random() * ($(".container").innerWidth() - boom_birth.innerWidth()));
                    boom_birth.css("left", left);
                }, 30000);
            };
            //子弹增强
            function strengthenBullet() {
                StrengthenbulletTime = setInterval(() => {
                    var strengBullet = $("<div/>").addClass("strengBullet");
                    $(".container").append(strengBullet);
                    var left = Math.round(Math.random() * ($(".container").innerWidth() - strengBullet.innerWidth()));
                    strengBullet.css("left", left);
                }, 20000);
            };
            //渲染道具飞行时间
            function propFly() {
                propFlyTime = setInterval(() => {
                    $(".strengBullet").each(function () {
                        var top = $(this).position().top + 10;
                        $(this).css("top", top);
                        if (top > $(".container").innerHeight()) $(this).remove()
                    });
                    $(".boom_birth").each(function () {
                        var top = $(this).position().top + 10;
                        $(this).css("top", top);
                        if (top > $(".container").innerHeight()) $(this).remove()
                    });
                }, 200);
            };
        });
    </script>
</body>

</html>